<template>
<div class="stage-rules-wrap">
  <content-layout
    :title="$t('rules.stageOneTit')"
    dark-color="#6339f3"
    light-color="#9c52ff"
  >
    <div class="stage-rules">
      <h4 class="stage-rules-tit">
        <i class="stage-one-game-rules"></i>
        <span>{{ $t('rules.gameRules') }}</span>
      </h4>
      <ul class="rules-list">
        <li>{{ $t('rules.stageOneGameRule1') }}</li>
        <li>{{ $t('rules.stageOneGameRule2') }}</li>
        <li>{{ $t('rules.stageOneGameRule3') }}</li>
        <li>{{ $t('rules.stageOneGameRule4') }}</li>
        <li>{{ $t('rules.stageOneGameRule5') }}</li>
      </ul>
      <h4 class="stage-rules-tit">
        <i class="stage-one-invitation-rules"></i>
        <span>{{ $t('rules.invitationRules') }}</span>
      </h4>
      <ul class="rules-list stage-one-invitation-rules-list">
        <li v-html="$t('rules.stageOneIvtcdt2Rule1')"></li>
        <li v-html="$t('rules.stageOneIvtcdt2Rule2')"></li>
        <li v-html="$t('rules.stageOneIvtcdt2Rule3')"></li>
        <li v-html="$t('rules.stageOneIvtcdt2Rule4')"></li>
        <li v-html="$t('rules.stageOneIvtcdt2Rule5')"></li>
      </ul>
    </div>
  </content-layout>
  <content-layout
    :title="$t('rules.stageTwoTit')"
    dark-color="#6339f3"
    light-color="#9c52ff"
  >
    <div class="stage-rules">
      <h4 class="stage-rules-tit">
        <i class="stage-two-game-rules"></i>
        <span>{{ $t('rules.gameRules') }}</span>
      </h4>
      <ul class="rules-list">
        <li>{{ $t('rules.stageTwoGameRule1') }}</li>
        <li>{{ $t('rules.stageTwoGameRule2') }}</li>
        <li>{{ $t('rules.stageTwoGameRule3') }}</li>
        <li>{{ $t('rules.stageTwoGameRule4') }}</li>          
        <li>{{ $t('rules.stageTwoGameRule5') }}</li>                   
      </ul>
      <h4 class="stage-rules-tit">
        <i class="stage-two-invitation-rules"></i>
        <span>{{ $t('rules.invitationRules') }}</span>
      </h4>
      <ul class="rules-list stage-two-invitation-rules-list">
        <li v-html="$t('rules.stageTwoIvtSubcdt2Rule1')"></li>
        <li v-html="$t('rules.stageTwoIvtSubcdt2Rule2')"></li>
        <li v-html="$t('rules.stageTwoIvtSubcdt2Rule3')"></li>
      </ul>
    </div>
  </content-layout>
</div>
</template>

<script>
import ContentLayout from '../components/ContentLayout.vue'
export default {
  components: {
    ContentLayout
  },
  data() {
    return {
      isShow: true
    }
  },
  created() {
	},
	mounted() {
	},
  methods: {}

}
</script>

<style lang="scss" scoped>
  h5 {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 0;
  }
  .child-tit {
    font-weight: normal;
  }
  .stage-rules-wrap {
    width: 100%;
  }
  .stage-rules {
    padding: 30px 12px 15px 12px;
  }
  .stage-rules-tit {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    i {
      display: inline-block;
      width: 16px;
      height: 16px;
    }
    span {
      font-size: 16px;
      color: #6339f3;
      padding-left: 10px;
    }
    .stage-one-game-rules {
      background: url('../assets/image/stage_one_game@2x.png') no-repeat left center;
      background-size: 16px 16px;
    }
    .stage-one-invitation-rules {
      background: url('../assets/image/stage_one_invitation@2x.png') no-repeat left center;
      background-size: 16px 16px;
    }
    .stage-two-game-rules {
      background: url('../assets/image/stage_two_game@2x.png') no-repeat left center;
      background-size: 16px 16px;
    }
    .stage-two-invitation-rules {
      background: url('../assets/image/stage_two_invitation@2x.png') no-repeat left center;
      background-size: 16px 16px;
    }
  }
  .rules-list {
    list-style: none;
    li {
      font-size: 16px;
      color: #666;
      line-height: 26px;
      padding: 15px 0;
      span {
        color: #333;
        font-weight: bold;
      }
    }
  }
  .stage-one-invitation-rules-list {
    li {
      padding-left: 20px;
      background: url('../assets/image/stage_one_round@2x.png') no-repeat left center;
      background-size: 12px 12px;
    }
  }
  .stage-two-invitation-rules-list {
    li {
      padding-left: 20px;
      background: url('../assets/image/stage_two_round@2x.png') no-repeat left center;
      background-size: 12px 12px;
    }
  }

  @media screen and (max-width: 1024px) {
    .rules-list {
      li {
        padding: 10px 0;
      }
    }
    .stage-one-invitation-rules-list,
    .stage-two-invitation-rules-list {
      li {
        margin-left: 0;
        padding: 10px 0 10px 20px;
        background-position: left 16px;
      }
    }
  }

  @media screen and (min-width: 1200px) {
    .stage-rules-wrap {
      width: 1300px;
      margin: 0 auto;
    }
    .stage-one-invitation-rules-list, .stage-two-invitation-rules-list {
      li {
        margin-left: 15px;
      }
    }
    .stage-rules {
      padding: 50px 40px 50px 40px;
    }
  }
</style>
